<template>
    <div class="content" v-loading="!resetEcharts">
        <!-- :interval="5000" arrow="always" -->
        <el-carousel :interval="500000" arrow="always">
            <el-carousel-item v-for="list, index in carouselList" :key="index">
                <div class="carouselContent">
                    <div class="item" :style="computedStyle" v-for="item, itemindex in list"
                        :key="'project' + itemindex">
                        <div class="title">
                            <div class="projectName" :title="item.project">{{ item.project }}</div>
                            <div class="more" @click="lookView(item)">详情</div>
                        </div>
                        <div class="chartContent">
                            <ChartContent v-if="resetEcharts" :data="item.options" :echartsId="'project' + itemindex">
                            </ChartContent>
                        </div>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>

        <el-dialog title="项目详情" :visible.sync="dialogVisible" width="90%" :before-close="handleClose">
            <div class="projectData">
                <div class="title">
                    {{ detialInfo.project }}
                </div>
                <div class="taskExprot">
                    <div class="echarts">
                        <ChartContent v-if="dialogVisible" :data="detialInfo.options" :echartsId="'detialInfo'">
                        </ChartContent>
                    </div>
                    <div class="tableContent ">
                        <el-table :data="detialInfo.totleTimeList" border style="width: 100%" height="100%">
                            <el-table-column label="序号" type="index" :index="indexMethod">
                            </el-table-column>
                            <el-table-column label="姓名">
                                <template slot-scope="scope">
                                    {{ scope.row.finishedName == 'null' || !scope.row.finishedName ?
                                        '--' : scope.row.finishedName }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="consumed" label="消耗工时">
                                <template slot-scope="scope">
                                    {{ scope.row.consumed }}h
                                </template>
                            </el-table-column>
                            <el-table-column label="项目工时占比">
                                <template slot-scope="scope">
                                    {{ getPercentage(scope.row) }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="title_small">项目阶段</div>
                <div class="stageList">
                    <div class="echarts">
                        <ChartContent v-if="!loading_stage" :data="stageOptions" :echartsId="'stageInfo'">
                        </ChartContent>
                    </div>
                    <div class="tableContent">
                        <el-table v-loading="loading_stage" :data="stageTableData" element-loading-text="Loading" border
                            fit highlight-current-row height="100%">
                            <el-table-column label="序号" type="index" :index="indexMethod" fixed="left"></el-table-column>
                            <el-table-column label="阶段名称" align="center" minWidth="120" fixed="left">
                                <template slot-scope="scope">
                                    {{ scope.row.executionsName || '--' }}
                                </template>
                            </el-table-column>
                            <el-table-column label="阶段负责人" align="center" minWidth="120">
                                <template slot-scope="scope">
                                    {{ scope.row.realName || '--' }}
                                </template>
                            </el-table-column>
                            <el-table-column label="计划开始" minWidth="120" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.begin || '--' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="计划结束" minWidth="120" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.end || '--' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="阶段状态" minWidth="80" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.status || '--' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="实际开始" minWidth="120" align="center" >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.realBegan || '--' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="实际结束" minWidth="120" align="center" >
                                <template slot-scope="scope">
                                    <span>{{ scope.row.realEnd || '--' }}</span>
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="周期" align="center" minWidth="80">
                            <template slot-scope="scope">
                                {{ scope.row.cycle || 0 }}h
                            </template>
                        </el-table-column> -->
                            <el-table-column label="预计工时" align="center" minWidth="80">
                                <template slot-scope="scope">
                                    {{ scope.row.totalEstimate || 0 }}h
                                </template>
                            </el-table-column>
                            <el-table-column label="实际消耗工时" align="center" minWidth="100" fixed="right">
                                <template slot-scope="scope">
                                    {{ scope.row.totalConsumed || 0 }}h
                                </template>
                            </el-table-column>
                            <el-table-column label="逾期天数" align="center" minWidth="80" fixed="right">
                                <template slot-scope="scope">
                                    {{ scope.row.overdueDay || 0 }}天
                                </template>
                            </el-table-column>
                            <el-table-column label="逾期工时" align="center" minWidth="80" fixed="right">
                                <template slot-scope="scope">
                                    {{ scope.row.overdue || 0 }}h
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="项目总工时" align="center" minWidth="150">
                            <template slot-scope="scope">
                                {{ scope.row.totalHours || 0 }}h
                            </template>
                        </el-table-column> -->
                        </el-table>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

import ChartContent from "@/components/ChartContent"
import projectConfig from "./projectConfig"
import overdueDataConfig from "./overdueDataConfig"
import tableApi from "@/api/table.js"

export default {
    components: { ChartContent },
    props: {
        groupNum: {
            type: Number,
            default: 8
        },
        dataList: {
            type: Array,
            default: []
        },
    },
    data() {
        return {
            loading_stage: false,
            detialInfo: {},
            dialogVisible: false,
            resetEcharts: false,
            carouselList: [],
            bugOption: [],
            stageTableData: [],
            stageOptions: {}
        }
    },
    created() {
        this.queryTasksListAll();
    },
    computed: {
        computedStyle() {
            console.log('----', this.groupNum)
            let num = this.groupNum / 4;
            num < 4 && num == 4
            return {
                height: `calc(100% / ${num} - 10px)`,
            };
        }
    },
    methods: {
        indexMethod(index) {
            return index + 1;
        },
        getPercentage(row) {
            let { consumed } = row
            let allConsumed = this.detialInfo.totleTimeList.reduce((a, c) => {
                return a + c.consumed;
            }, 0);
            return `${((consumed / allConsumed) * 100).toFixed(2)}%`
        },
        lookView(row) {
            this.detialInfo = { ...row }
            this.detialInfo.options.series[0].label = {}
            this.detialInfo.options.series[0].labelLine = { show: true }
            this.dialogVisible = true
            console.log(this.detialInfo)
            this.queryProject(row.project)
        },
        async queryProject(projectName) {
            this.loading_stage = true;
            let { data: data } = await tableApi.executionsListAll({ projectName: [projectName] })
            this.loading_stage = false;
            this.stageTableData = data.data;
            this.stageOptions = JSON.parse(JSON.stringify(overdueDataConfig.option));
            this.stageOptions.xAxis.data = this.stageTableData.map(item => item.executionsName);
            this.stageOptions.series[0].data = this.stageTableData.map(item => item.totalConsumed);
            this.stageOptions.series[1].data = this.stageTableData.map(item => item.overdueDay);
            this.stageOptions.series[2].data = this.stageTableData.map(item => item.overdue);

        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        groupArrayElements(array, groupSize) {
            const result = [];
            for (let i = 0; i < array.length; i += groupSize) {
                const group = array.slice(i, i + groupSize);
                result.push(group);
            }
            return result;
        },
        async queryTasksListAll() {
            this.resetEcharts = false;
            let { option } = projectConfig
            let newList = this.setTasksData(this.dataList);
            newList.forEach(e => {
                let options = JSON.parse(JSON.stringify(option))
                options.series[0].data = e.totleTimeList.map(t => {
                    return {
                        name: t.finishedName == 'null' || !t.finishedName ? '--' : t.finishedName,
                        value: t.consumed
                    }
                })
                e.options = {
                    ...options,
                }
            })
            this.carouselList = this.groupArrayElements(newList, this.groupNum);
            console.log(newList, this.carouselList)
            this.$nextTick(() => {
                this.resetEcharts = true;
            })
        },
        setTasksData(list) {
            let projectList = [];
            list.forEach(e => {
                let findIndex = projectList.findIndex(p => {
                    return p.project == e.project
                })
                if (findIndex !== -1) {
                    projectList[findIndex].projectDetial.push(e)
                } else {
                    projectList.push(
                        {
                            project: e.project,
                            projectDetial: [e]
                        }
                    )
                }
            });
            projectList.forEach(e => {
                e.totleTimeList = this.calculateTotalConsumed(e.projectDetial)
            });
            return projectList
        },

        calculateTotalConsumed(array) {
            const result = {};
            array.forEach(item => {
                const { finishedName, consumed } = item;
                if (result[finishedName] !== undefined) {
                    result[finishedName] += consumed;
                } else {
                    result[finishedName] = consumed;
                }
            });
            return Object.keys(result).map(name => ({
                finishedName: name,
                consumed: result[name]
            }));
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    padding: 10px;
    height: 100%;
}

::v-deep .el-carousel {
    height: 100%;

    .el-carousel__container {
        height: 100%;
    }
}

::v-deep .el-carousel__item {
    background-color: #f6f6f6;
}

::v-deep .el-carousel__indicators {
    .el-carousel__indicator--horizontal {
        padding: 0%;
        margin: 0 5px;

        .el-carousel__button {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background-color: #0895c3
        }
    }
}

.carouselContent {
    width: 100%;
    height: 100%;
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .item {
        width: calc(100% / 4 - 10px);
        margin: 5px;
        background-color: #ffffff;
        box-shadow: 0px 0px 20px 0 #e0e0e0;
        border-radius: 4px;
        padding: 10px;

        .title {
            width: 100%;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .projectName {
                width: calc(100% - 50px);
                line-height: 20px;
                font-size: 14px;
                font-weight: bold;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .more {
                width: 40px;
                height: 20px;
                cursor: pointer;
                font-size: 16px;
                text-align: right;
                color: #999999;
                transition: all 0.2s;

                &:hover {
                    color: #0085fa;
                    transform: translate(-2px);
                }
            }
        }

        .chartContent {
            width: 100%;
            height: calc(100% - 20px);
        }
    }
}

.projectData {
    width: 100%;
    height: calc(85vh - 140px);
    overflow: auto;

    .title,
    .title_small {
        font-weight: bold;
        line-height: 50px;
    }

    .title {
        font-size: 18px;
    }

    .title_small {
        font-size: 16px;
    }

    &::-webkit-scrollbar {
        display: none;
    }

    .title {
        line-height: 30px;
    }

    .taskExprot,
    .stageList {
        display: flex;
        justify-content: space-between;
        height: 350px;

        .echarts {
            width: 50%;
            height: 100%;
        }

        .tableContent {
            height: 100%;
            width: calc(50% - 15px);
        }
    }
}

.stageList {
    height: 300px;
}

::v-deep .el-dialog__footer {
    box-shadow: 0 -1px 20px 10px #00000010;
}

::v-deep .el-dialog {
    margin-top: 5vh !important;
}

::v-deep .el-table__body-wrapper {
    &::-webkit-scrollbar {
        width: 6px;
        height: 12px;
    }

    &::-webkit-scrollbar-track {
        background: #e7e7e7;
    }

    &::-webkit-scrollbar-thumb {
        background: #34c2f6;
        border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #217fb5;
    }
}
</style>